<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import {getLineChart} from '@/api/orders'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
   
    getLineChart()
    .then(res=>{
       console.log(res);
       this.initChart(res)
      })
    .catch(err=>console.log(err)) 
    
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(res) {
      this.chart = echarts.init(document.getElementById(this.id))
      //日期
     /*  const xData = (function() {
        const data = []
        for (let i = 1; i < 13; i++) {
          data.push(i + 'month')
        }
        return data
      }()) */
      const xData=res.xAxis[0].data
      //初始值设置
      this.chart.setOption({
        backgroundColor: '#344b58',
        //标题组件，包含主标题和副标题。
        title: {
          //主标题文本，支持使用 \n 换行。
          text: '用户来源',
          x: '20',
          top: '20',
          //主标题样式
          textStyle: {
            //主标题文字的颜色。
            color: '#fff',
            //主标题文字的字体大小。
            fontSize: '18'
          },
          //副标题文本样式
          subtextStyle: {
            color: '#90979c',
            fontSize: '16'
          }
        },
        //提示框组件
        tooltip: {
          //触发类型
          trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
          //坐标轴指示器配置项。
          axisPointer: {
            //提示框浮层的文本样式。
            textStyle: {
              color: '#C5C1AA'
            }
          }
        },
        //直角坐标系内绘图网格，
        //单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
        grid: {
          //grid 组件离容器左侧的距离。
          left: '5%',
          //grid 组件离容器左侧的距离。 
          right: '5%',
          borderWidth: 0,
          top: 150,
          bottom: 95,
          textStyle: {
            color: '#fff'
          }
        },
        /* 图例组件。
        图例组件展现了不同系列的标记(symbol)，颜色和名字。 */
        legend: {
          x: '8%',
          top: '15%',
          textStyle: {
            color: '#90979c'
          },
          //和series有关
          data:res.legend.data
        },
        //系列列表。每个系列通过 type 决定自己的图表类型 和legend.data有关系
        series:res.series,
        //????????????????????
        calculable: true,
        /* 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。 */
        xAxis: [{
          //x坐标轴类型。
          type: 'category',//'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
          //x坐标轴轴线相关设置。
          axisLine: {
            //x坐标轴线线的颜色。   
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false//x轴是否显示分隔线。默认数值轴显示，类目轴不显示。
          },
          axisTick: {
            show: false//x轴是否显示坐标轴刻度。
          },
          splitArea: {
            show: false//x轴是否显示分隔区域。
          },
          axisLabel: {
            interval: 0//坐标轴刻度标签的显示间隔，在类目轴中有效
          },
          data: xData
        }],
        /* 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。*/
        yAxis: [{
          //y坐标轴类型。
          type: res.yAxis[0].type,
          //分割线
          splitLine: {
            show: true,
            lineStyle: {
              color: '#90979c'
            }
          },
          //刻度线
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          //是否显示刻度
          axisTick: {
            show: false
          },
          
          axisLabel: {
            interval: 0//坐标轴刻度标签的显示间隔，在类目轴中有效。
          },
          
          splitArea: {
            show: false//是否显示分割区域
          }
        }],
        
        //用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
        dataZoom: [{
          show: true,
          height: 30,
          xAxisIndex: [
            0
          ],
          bottom: 30,
          start: 0,
          end: 100,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'

          },
          textStyle: {
            color: '#fff' },
          borderColor: '#90979c'

        }, {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }],
      })
    }
  },

 

}
</script>
